<template>
  <TnPopup v-model="show" open-direction="bottom" height="750rpx">
    <view class="tn-p-lg" style="padding-bottom: 10 !important;">
      <view class="login-header">
        <view class="login-header__title">
          {{ t('login.auth.title') }}
        </view>
        <view class="login-header__close" @click="closeLoginAuth">
          <TnIcon name="close" />
        </view>
      </view>
      <view class="login-header-tips">
        {{ t('login.auth.tips') }}
      </view>
      <view class="user-avatar-box">
        <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
          style="padding: 40rpx;background: transparent;border: none;border-radius: 999rpx;">
          <view class="user-avatar-box-img-box">
            <view v-if="!loginForm.avatar" class="user-avatar-box-img-box-empty">
              <TnIcon name="clover-fill" color="#e0e6e9" />
            </view>
            <view v-if="loginForm.avatar" class="user-avatar-box-img-box-avatar">
              <image :src="loginForm.avatar" />
            </view>
            <view class="user-avatar-box-img-box-assist">
              <TnIcon name="camera-fill" />
            </view>
          </view>
        </button>
      </view>
      <view class="user-nickname">
        <input v-model="loginForm.nickname" type="nickname" @change="bindBlurNickName"
          style="height: 80rpx;background: none;display: flex;align-items: center"
          :placeholder="t('login.auth.nicknamePlaceholder')" />
      </view>
      <view class="login-button">
        <TnButton :bg-color="loginForm.nickname && loginForm.avatar ? '#07c160' : '#e2e2e2'"
          :text-color="loginForm.nickname && loginForm.avatar ? '#fff' : '#939393'" width="100%" height="74rpx"
          :disabled="!loginForm.nickname || !loginForm.avatar" @click="login">{{ t('login.auth.submit') }}
        </TnButton>
      </view>
    </view>
  </TnPopup>
</template>

<script setup>
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import { ref, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { BASE_URL } from "@/request/config.js";
import { request } from '@/request/request'


const { t } = useI18n()

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const { show, pages } = toRefs(props)
const emit = defineEmits(['update:show', 'login-success'])

const loginForm = ref({
  nickname: '',
  avatar: ''
})

const bindBlurNickName = (e) => {
  loginForm.value.nickname = e.detail.value
}

const onChooseAvatar = (e) => {
  loginForm.value.avatar = e.detail.avatarUrl
}

const login = () => {
  if (!loginForm.value.nickname || !loginForm.value.avatar) return

  uni.uploadFile({
    url: BASE_URL + 'user/authorization',
    filePath: loginForm.value.avatar,
    name: 'avatar_img',
    header: {
      'Authorization': `Bearer ${uni.getStorageSync('aichat_token')}`
    },
    formData: {
      nickname: loginForm.value.nickname
    },
    success: (res) => {
      const result = JSON.parse(res.data);
      console.log('授权', result);
      if (result.code === 200) {
        emit('update:show', false)
        emit('login-success')
        uni.showToast({
          title: t('login.auth.success'),
          icon: 'success'
        })
        request.get('user/my').then((res) => {
          if (res.code === 200) {
            uni.setStorageSync('aichat_user', res.data);
          }
        }).catch((err) => {
          console.error('获取用户信息错误：', err)
        })
      } else {
        uni.showToast({
          title: result.message || t('login.auth.failed'),
          icon: 'none'
        })
      }
    },
    fail: (error) => {
      console.error('认证失败:', error)
      uni.showToast({
        title: t('login.auth.failed'),
        icon: 'none'
      })
    }
  })
}

const closeLoginAuth = () => {
  emit('update:show', false)
}
</script>

<style lang="scss" scoped>
.login-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__title {
    font-size: 36rpx;
    font-weight: bold;
  }

  &__close {
    font-size: 36rpx;
    cursor: pointer;
  }

  &-tips {
    padding: 10rpx;
    font-size: 26rpx;
    color: #666;
  }
}

.user-avatar-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28rpx;

  &-img-box,
  &-img-box-avatar {
    position: relative;
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  &-img-box:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    filter: drop-shadow(0 0 80rpx rgba(0, 0, 0, 0.15));
  }

  &-img-box-empty {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #f7f7f7;
    color: #e0e6e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100rpx;
  }

  &-img-box-assist {
    position: absolute;
    right: -10rpx;
    bottom: -12rpx;
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background-color: #07c160;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
    border: 6rpx solid #fff;
  }
}

.user-nickname {
  position: relative;
  width: 100%;
  height: 80rpx;
  background-color: #f7f7f7;
  margin-top: 50rpx;
  padding: 0 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.login-button {
  position: relative;
  width: 100%;
  margin-top: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26rpx 0;
  border-radius: 12rpx;
}
</style>